<template>
  <div class="pr-user">
    <div class="pr-user-head">
      <el-cascader
        v-model="orgId"
        :options="orgTree"
        placeholder="请选择部门"
        clearable
        @change="query"
      />
      <el-input
        v-model="keyWord"
        placeholder="请输入姓名"
        clearable
        @change="query"
      />
      <el-button @click="query">查询</el-button>
      <el-button v-has type="primary" @click="addVisibleShow">新增</el-button>
      <el-button v-has type="danger" @click="delAllUser">批量删除</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        row-key="userId"
        border
        fit
        stripe
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          fixed
          align="center"
          width="55"
        />
        <el-table-column
          v-for="item in tableHead"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.title === 'status'">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="stateChange(scope.row)"
              />
            </div>
            <div v-else>
              {{ scope.row[item.title] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button v-has size="mini" @click="editVisibleShow(scope.row)"
              >修改</el-button
            >
            <el-button
              v-has
              size="mini"
              type="danger"
              @click="deleteVisibleShow(scope.row)"
              >删除</el-button
            >
            <el-button
              v-has
              size="mini"
              type="primary"
              @click="rolesVisibleShow(scope.row)"
              >分配角色</el-button
            >
            <el-button
              v-has
              size="mini"
              type="warning"
              @click="passwordVisibleShow(scope.row)"
              >修改密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="paging.current"
        :page-sizes="paging.sizes"
        :page-size="paging.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增弹框 -->
    <el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="addVisible" width="60%">
      <add-dialog v-if="addVisible" @chang="addVisibleHide" />
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog title="修改用户" :close-on-click-modal="false" :visible.sync="editVisible" width="60%">
      <edit-dialog v-if="editVisible" :row="row" @chang="editVisibleHide" />
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="deleteVisible" width="20%">
      <span>是否确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSAffirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :close-on-click-modal="false" :visible.sync="passwordVisible" width="40%">
      <password-dialog
        v-if="passwordVisible"
        :row="row"
        @chang="passwordVisibleHide"
      />
    </el-dialog>
    <!-- 分配教师弹框 -->
    <el-dialog title="分配角色" :close-on-click-modal="false" :visible.sync="rolesVisible" width="40%">
      <roles-dialog v-if="rolesVisible" :row="row" @chang="rolesVisibleHide" />
    </el-dialog>
  </div>
</template>

<script>
import AddDialog from "./components/add.vue";
import EditDialog from "./components/amend.vue";
import PasswordDialog from "./components/password.vue";
import RolesDialog from "./components/assignRoles.vue";

export default {
  components: {
    AddDialog,
    EditDialog,
    PasswordDialog,
    RolesDialog,
  },
  data() {
    return {
      row: {},

      addVisible: false, // 新增弹框显示隐藏
      editVisible: false, // 修改弹窗显示隐藏
      deleteVisible: false, // 删除弹框显示隐藏
      passwordVisible: false, // 修改密码弹框显示隐藏
      rolesVisible: false, // 分配教师弹框显示隐藏

      selectList: [], // 表格多选数据——批量删除

      tableHead: [
        {
          id: 0,
          label: "ID",
          title: "userId",
        },
        {
          id: 1,
          label: "姓名",
          title: "username",
        },
        {
          id: 2,
          label: "角色",
          title: "roleName",
        },
        {
          id: 3,
          label: "部门",
          title: "orgName",
        },
        {
          id: 4,
          label: "电话",
          title: "mobile",
        },
        {
          id: 5,
          label: "邮箱",
          title: "email",
        },
        {
          id: 6,
          label: "状态",
          title: "status",
        },
      ],
      tableData: [],

      // 部门树
      orgTree: [],
      // 条件
      orgId: "",
      keyWord: "",
      paging: {
        size: 10,
        sizes: [10, 30, 50, 100],
        total: 0,
        current: 1, // 分页默认开始显示页数
      },
    };
  },
  created() {
    // 获取部门选择树
    this.getSysOrgTree();
    // 查询用户列表
    this.getSysUserList();
  },
  methods: {
    // 分页参数改变
    handleSizeChange(val) {
      if (this.paging.size !== val) {
        this.paging.size = val;
        this.getSysUserList();
      }
    },
    handleCurrentChange(val) {
      if (this.paging.current !== val) {
        this.paging.current = val;
        this.getSysUserList();
      }
    },

    // 重新查询
    query: function () {
      this.paging.current = 1;
      this.getSysUserList();
    },

    // 获取部门选择树
    getSysOrgTree: function () {
      const params = {};
      this.$server.getSysOrgTree(params).then((res) => {
        let orgTree = res.orgTree;
        orgTree = this.parseTreeJson(orgTree);
        this.orgTree = orgTree;
      });
    },

    // 递归组装部门树
    parseTreeJson: function (array) {
      const tempArr = [];
      for (let i = 0; i < array.length; i++) {
        const temp = {
          value: array[i].id,
          label: array[i].fullName,
        };
        if (array[i].childrens && typeof array[i].childrens === "object") {
          temp.children = this.parseTreeJson(array[i].childrens);
        }
        tempArr.push(temp);
      }
      return tempArr;
    },

    // 查询用户列表
    getSysUserList: function () {
      let orgId = this.$data.orgId;
      if (orgId) {
        orgId = orgId[orgId.length - 1];
      }
      const params = {
        orgId: orgId || "",
        keyWord: this.$data.keyWord,
        page: this.paging.current,
        pageSize: this.paging.size,
      };
      this.$server.getSysUserList(params).then((res) => {
        console.log(res.page.list);
        const tableData = res.page.list;
        if (tableData.length == 0 && this.paging.current != 1) {
          this.paging.current = this.paging.current - 1;
          this.getSysUserList();
        } else {
          this.tableData = tableData;
          // 设置分页
          const paging = {
            sizes: [10, 30, 50, 100],
            current: res.page.currPage,
            size: res.page.pageSize,
            total: res.page.totalCount,
          };
          this.paging = paging;
        }
      });
    },

    // 添加用户
    addVisibleShow: function () {
      this.addVisible = true;
    },
    addVisibleHide: function () {
      this.addVisible = false;
      this.getSysUserList();
    },
    // 修改用户
    editVisibleShow: function (row) {
      this.row = row;
      this.editVisible = true;
    },
    editVisibleHide: function () {
      this.editVisible = false;
      this.getSysUserList();
    },

    // 删除用户——批量删除
    // 表格多选
    handleSelectionChange: function (e) {
      this.selectList = e;
    },
    // 删除多选的用户
    delAllUser: function () {
      const that = this;
      let params = [];
      this.selectList.forEach((item) => {
        params = [...params, "" + item.userId];
      });
      if (params.length == 0) {
        this.$message.error("请先勾选需要删除的数据");
        return;
      }
      this.$server.deleteSysUser(params).then((res) => {
        that.getSysUserList();
      });
    },
    // 删除用户——逐条删除
    deleteVisibleShow: function (row) {
      this.row = row;
      this.deleteVisible = true;
    },
    // 确认删除
    deleteSAffirm: function () {
      const that = this;
      this.deleteVisible = false;
      const params = [this.row.userId];
      this.$server.deleteSysUser(params).then((res) => {
        that.getSysUserList();
      });
    },

    // 修改密码
    passwordVisibleShow: function (row) {
      this.row = row;
      this.passwordVisible = true;
    },
    passwordVisibleHide: function () {
      this.passwordVisible = false;
      this.getSysUserList();
    },

    // 修改状态
    stateChange: function (row) {
      const userId = row.userId;
      const status = row.status ? "1" : "0";
      const params = {
        userId: userId,
        status: status,
      };
      this.$server.editSysUser(params).then((res) => {
        this.$message({
          type: "success",
          message: "状态修改成功!",
        });
      });
    },

    // 分配角色
    rolesVisibleShow: function (row) {
      this.row = row;
      this.rolesVisible = true;
    },
    rolesVisibleHide: function () {
      this.rolesVisible = false;
      this.getSysUserList();
    },
  },
};
</script>
<style lang="scss" scope>
.pr-user {
  &-head {
    display: flex;
    padding: 20px;

    > div {
      margin-right: 20px;
    }

    .el-cascader {
      width: 200px;
    }

    .el-input {
      width: 200px;
    }
  }
}

.pr-dialog-assignRoles {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-pagination {
  margin-top: 20px;
}
</style>
